<template>
  <div class="case-card">
    <el-descriptions 
      border
      :column="2"
      size="large"
    >
      <el-descriptions-item label="指控内容" :span="2">
        <div class="charge-content" v-html="latestData.accuserCharge">
        </div>
      </el-descriptions-item>
      
      <el-descriptions-item label="时间段">
        <el-tag type="info">{{ latestData.timePeriod }}</el-tag>
      </el-descriptions-item>
      
      <el-descriptions-item label="被告人">
        <el-tag type="danger">{{ latestData.defendantName }}</el-tag>
      </el-descriptions-item>
      
      <el-descriptions-item label="犯罪活动">
        <el-tag type="warning">{{ latestData.criminalActivity }}</el-tag>
      </el-descriptions-item>
      
      <el-descriptions-item label="银行卡信息">
        <span class="highlight-text">{{ latestData.cardInfo }}</span>
      </el-descriptions-item>
      
      <el-descriptions-item label="获利金额">
        <span class="highlight-text">{{ formatCurrency(latestData.profitAmount) }}</span>
      </el-descriptions-item>
      
      <el-descriptions-item label="使用银行卡数量">
        <span class="highlight-text">{{ latestData.usedCardCount }}张</span>
      </el-descriptions-item>
      
      <el-descriptions-item label="总金额">
        <span class="highlight-text">{{ formatCurrency(latestData.totalAmount) }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import {
  getCaseFactsList
} from '@/api/flaud/casefacts'
import { ref, onMounted, computed } from 'vue'
const page = ref(1)
const total = ref(0)
const pageSize = ref(1)
const tableData = ref([])
const searchInfo = ref({})

onMounted(() => {
  getTableData()
})

const getTableData = async () => {
  const table = await getCaseFactsList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
  console.log(tableData.value)
}

// 计算属性，获取最新的一条数据，按CreatedAt降序排序
const latestData = computed(() => {
  if (tableData.value.length === 0) return {};
  return tableData.value.sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime())[0];
})

const formatCurrency = (value: number) => {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: 2
  }).format(value).replace('CN¥', '¥')
}
</script>

<style scoped>
.case-card {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.charge-content {
  line-height: 1.6;
  text-align: justify;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
}

.highlight-text {
  font-weight: bold;
  color: #f56c6c;
}

:deep(.el-descriptions__title) {
  font-size: 18px;
  font-weight: bold;
  color: #1a3a72;
  margin-bottom: 20px;
}

:deep(.el-descriptions__body) {
  background: #fff;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
  width: 120px;
}

:deep(.el-descriptions__content) {
  color: #303133;
}
</style>

